<template>
  <section class="todoapp">
			<header class="header">
				<h1>todos</h1>
				<input @keyup.enter="addTodo" class="new-todo" placeholder="What needs to be done?" autofocus>
			</header>
			<!-- This section should be hidden by default and shown when there are todos -->
			<section class="main">
				<input id="toggle-all" class="toggle-all" type="checkbox" @click="toggleAll">
				<label for="toggle-all">Mark all as complete</label>
				<ul class="todo-list">
					
					<li v-for="todo in filteredTodos" :key="todo.id" 
          :class="{completed:todo.completed}">
						<div class="view">
							<input class="toggle" type="checkbox" v-model="todo.completed">
							<label v-text="todo.title"></label>
							<button class="destroy" @click="removeTodo(todo)"></button>
						</div>
						<input class="edit" value="Create a TodoMVC template">
					</li>

				</ul>
			</section>
			<!-- This footer should be hidden by default and shown when there are todos -->
			<footer class="footer" v-show="todos.length>0">
				<!-- This should be `0 items left` by default -->
				<span class="todo-count"><strong>{{ remaining }}</strong> item left</span>
				<!-- Remove this if you don't implement routing -->
				<ul class="filters">
					<li>
						<a href="#/all" :class="{selected:visibility==='all'}">All</a>
					</li>
					<li>
						<a href="#/active" :class="{selected:visibility==='active'}">Active</a>
					</li>
					<li>
						<a href="#/completed" :class="{selected:visibility==='completed'}">Completed</a>
					</li>
				</ul>
				<!-- Hidden if no completed items are left ↓ -->
				<button class="clear-completed" @click="clearCompleted">Clear completed</button>
			</footer>
		</section>
</template>

<script>
export default{
  data(){
    return{
      todos:[
        {
          id: 123,
          title: '测试内容1',
          completed:false
        },
        {
          id: 1235,
          title: '测试内容2',
          completed:true
        }
      ],
      visibility:'all'
    }
  },
  methods:{
    toggleAll(e){
      console.log(e)
      this.todos.forEach(item=>{
        item.completed=e.target.checked
      })
    },
    onHashChange(){
      // 把/#去掉
      const hash = window.location.hash.replace(/#\/?/,'')
      if(['all','active','completed'].includes(hash)){
        this.visibility = hash
      }else{
        window.location.hash = ''
        this.visibility = 'all'
      }
    },
    addTodo(e){
      const title = e.target.value.trim()
      if(!title){
        return
      }
      this.todos.push({
        id: Date.now(),
        title,
        completed:false
      })
      e.target.value=''
    },
    removeTodo(todo){
      this.todos.splice(this.todos.indexOf(todo),1)
    },
    clearCompleted(){
      this.todos = this.todos.filter(todo=>!todo.completed)
    }

  },
  computed:{
    filteredTodos(){
      switch(this.visibility){
        case 'all':
          return this.todos
        case 'active':
          return this.todos.filter(todo => !todo.completed)
        case 'completed':
          return this.todos.filter(todo => todo.completed)
      } 
    },
    remaining(){
      return this.todos.filter(todo => !todo.completed).length
    }
  },
  mounted(){
    // 监听路径hash值变化，变化就触发onHashChange方法
    window.addEventListener('hashchange',this.onHashChange)
    // 避免刷新页面不会触发onHashChange，这里我们主动触发
    this.onHashChange()
  }
}
</script>

<style>
@import "https://unpkg.com/todomvc-app-css@2.4.1/index.css"
</style>